<template>
  <div class="relative-team">
    <el-tabs
      :key="refreshKey"
      v-model="componentName">
      <el-tab-pane
        v-for="item in tabs"
        :key="item.value"
        :label="item.label"
        :name="item.value"
        lazy>
        <component
          :is="item.value"
          v-bind="$attrs"
          :user-list="userList"
          v-on="$listeners"
          @data-change="dataChange" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TeamMembers from './TeamMembers'
import CrossSellProducts from './CrossSellProducts'

export default {
  // RelativeTeam
  name: 'RelativeTeam',

  components: {
    TeamMembers,
    CrossSellProducts
  },

  inject: ['rootTabs'],

  inheritAttrs: false,

  props: {},

  data() {
    return {
      componentName: 'TeamMembers',
      tabs: [{
        label: this.$t('crm.components.31e344b96d46107688033510c850df7e'),
        value: 'TeamMembers'
      }, {
        label: this.$t('crm.components.e4477475dd6dd378767f22cac64c58b0'),
        value: 'CrossSellProducts'
      }],
      userList: [],
      refreshKey: Date.now()
    }
  },

  computed: {},

  watch: {
    'rootTabs.currentName'(val) {
      if (val === 'RelativeTeam') {
        this.refreshData()
      }
    }
  },

  created() {},

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * @description: 刷新数据
     * @return {*}
     */
    refreshData() {
      this.refreshKey = Date.now()
    },

    /**
     * @description: 团队列表
     * @param {*} data
     * @return {*}
     */
    dataChange(data) {
      this.userList = data
    }
  }
}
</script>

<style lang="scss" scoped>
.relative-team {
  position: relative;
  height: 100%;
}
</style>
